<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs" lineColor="#ffa303" :scrollable="false" @click="click"></u-tabs>
		</u-sticky>
		<view class="content" :style="orderList.length<3?'height:'+(viewHeight-70)+'px;':''">
			<view class="order_list" v-if="orderList.length">
				<orderCard :data="item" v-for="(item,index) in orderList" :key="index"></orderCard>
			</view>
			<view v-else>
				<u-empty marginTop="60%" icon='https://file.shopro.top/imgs/empty/empty_goods.png' width="260"
					height="260" text="您还没有相关的订单~">
				</u-empty>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import orderCard from './components/orderCard.vue'
	export default {
		components: {
			orderCard
		},
		data() {
			return {
				//可视高度
				viewHeight: 0,
				//tab栏下标
				tabIndex: 0,
				//请求状态
				status: 'loadmore',
				page: 0,
				//tab数据
				tabs: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}],
				//订单数据
				orderList: [{
						id: "2653165313",
						status: "0",
						imgUrl: "/static/logo.png",
						name: "	我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字",
						price: 150.50,
						count: 3,
						freight: 0
					},
					{
						id: "265316531322",
						status: "2",
						imgUrl: "/static/logo.png",
						name: "	我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字",
						price: 150.50,
						count: 3,
						freight: 0
					},
					{
						id: "265316531223",
						status: "1",
						imgUrl: "/static/logo.png",
						name: "	我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字",
						price: 150.50,
						count: 3,
						freight: 0
					},
					{
						id: "26531653331223",
						status: "3",
						imgUrl: "/static/logo.png",
						name: "	我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字",
						price: 150.50,
						count: 3,
						freight: 0
					}
				]
			}
		},
		onReady() {
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.viewHeight = res.windowHeight
				}
			})
		},
		onReachBottom() {
			console.log(this.page)
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.orderList = this.orderList.concat(this.orderList)
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		methods: {
			click(item) {
				this.tabIndex = item.index
				console.log("我要请求")
			}
		}
	}
</script>


<style lang="scss">
	.content {
		background-color: #F6F6F6;
		padding: 20rpx 20rpx 30rpx;
	}
</style>